<template>
    <div class="app-container">
        <div class="search-container">
            <el-form ref="queryFormRef" :model="queryParams" :inline="true">
                <el-form-item label="关键字" prop="name">
                    <el-input
                            v-model="queryParams.name"
                            placeholder="名称"
                            clearable
                            @keyup.enter="handleQuery"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleQuery()"
                    ><i-ep-search />搜索</el-button
                    >
                    <el-button @click="resetQuery()"><i-ep-refresh />重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-dialog
                v-model="dialog.visible"
                :title="dialog.title"
                width="500px"
                @close="closeDialog"
        >
            <el-form
                    ref="dataFormRef"
                    :model="formData"
                    :rules="rules"
                    label-width="80px"
            >
                <el-form-item label="字典名称" prop="name">
                    <el-input v-model="formData.name" placeholder="请输入字典名称" />
                </el-form-item>
                <el-form-item label="字典编码" prop="code">
                    <el-input v-model="formData.code" placeholder="请输入字典编码" />
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="formData.status">
                        <el-radio :label="1">正常</el-radio>
                        <el-radio :label="0">停用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input
                            v-model="formData.remark"
                            type="textarea"
                            placeholder="字典类型备注"
                            :autosize="{ minRows: 2, maxRows: 4 }"
                    />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="handleSubmit">确 定</el-button>
                    <el-button @click="closeDialog">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
    import {ScenicSpotForm, ScenicSpotQuery} from "@/api/spot/types";
    // import {getScenicSpotPage} from "@/api/spot";

    const queryFormRef = ref(ElForm);
    const dataFormRef = ref(ElForm);

    const loading = ref(false);
    const ids = ref<number[]>([]);
    const total = ref(0);

    const queryParams = reactive<ScenicSpotQuery>({
        pageNum: 1,
        pageSize: 10,
    });
    const rules = reactive({
        name: [{ required: true, message: "请输入字典类型名称", trigger: "blur" }],
        code: [{ required: true, message: "请输入字典类型编码", trigger: "blur" }],
    });
    const dialog = reactive({
        title: "",
        visible: false,
    });

    const formData = reactive<ScenicSpotForm>({
        status: 1,
    });

    /** 查询 */
    function handleQuery() {
        // loading.value = true;
        // getScenicSpotPage(queryParams)
        //     .then(({ data }) => {
        //         dictTypeList.value = data.list;
        //         total.value = data.total;
        //     })
        //     .finally(() => {
        //         loading.value = false;
        //     });
    }

    onMounted(() => {
        handleQuery();
    });
</script>

<style lang="scss" scoped>

</style>
